<template>
  <RadioGroup @change="onSelectInstance">
    <template v-for="instance in data" :key="instance.type">
      <Radio :value="instance.type">
        <Card size="small" class="w-full !md:mt-0 !mt-4" :title="instance.type" :canExpan="false">
          <div>
            <!-- <span>适合用户：{{ instance.enterpriseSize }} </span>
          <br /> -->
            <span v-show="!instance.isExpand">固定容量：{{ instance.orderVolume }}订单</span>
            <span v-show="instance.isExpand">最小容量：{{ instance.orderVolume }}订单</span>
            <br />
            <span v-show="!instance.isExpand">不支持扩容</span>
            <span v-show="instance.isExpand">支持扩容</span>
            <br />
            <span v-show="instance.dbMultiTenantMode === 'COLUMN'">数据隔离级别低：共享数据库，共享schema</span>
            <span v-show="instance.dbMultiTenantMode === 'SCHEMA'">数据隔离级别中：共享数据库，独立schema</span>
            <br />
            <span v-show="instance.appMultiTenantMode === 'SHARED'">应用隔离级别低：命名空间共享</span>
            <span v-show="instance.appMultiTenantMode === 'NAMESPACE'">应用隔离级别中：命名空间隔离</span>
            <br />
          </div>
        </Card>
      </Radio>
    </template>
  </RadioGroup>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Radio, Card } from 'ant-design-vue';
export default defineComponent({
  props: {
    data: Object,
  },
  emits: ['select'],
  components: {
    Radio,
    Card,
    RadioGroup: Radio.Group,
  },
  setup(props, { emit }) {
    function onSelectInstance(e) {
      emit('select', { type: e.target.value });
    }

    return {
      onSelectInstance,
    };
  },
});
</script>
